import React, { PureComponent } from 'react';
import {
    StatusBar,
    StyleSheet,
    View,
    TouchableWithoutFeedback,
    Text,
    Dimensions
} from "react-native";
import QiniuStream from "../components/qiniu_stream/stream";

const { width, height } = Dimensions.get('window');

export default class StreamPage extends PureComponent {

    static navigationOptions = ({ navigation }) => ({
        headerShown: false,
        headerMode: 'none'
    });

    constructor(props) {
        super(props);
        this.state = {
            showQiniuStream: false,
            publishStatus: false,
            // 1是前 0是后
            cameraDirection: 1,
            publishUrl: ''
        }
    }

    componentDidMount() {
        // 这个必须要大于动画执行的时间
        this.timer = setTimeout(() => {
            const { publishUrl } = this.props.navigation.state.params;
            if (publishUrl) {
                this.setState({
                    publishUrl,
                    showQiniuStream: true
                })
            }
        }, 700)
    }

    componentWillUnmount() {
        // 必须要取消调这个定时器
        this.timer && clearTimeout(this.timer);
    }

    /**
     * 关闭事件
     */
    _onPressClose = () => {
        const { publishStatus } = this.state;
        // 如果正在直播就必须暂停
        if (publishStatus) {
            // 等他回调完在去关闭
            this.setState({ publishStatus: false }, () => this.props.navigation.goBack())
        } else {
            this.props.navigation.goBack();
        }
    };

    /**
     * 切换摄像头 1前 0后
     */
    _onPressChangeCamera = () => {
        const { cameraDirection } = this.state;
        this.setState({ cameraDirection: Number(!cameraDirection) });
    };

    /**
     * 启动直播
     * @private
     */
    _onPressStartStream = () => {
        const { publishStatus } = this.state;
        this.setState({ publishStatus: !publishStatus });
    };

    /**
     * 打开摄像头失败
     */
    onOpenCameraFail() {

    }

    /**
     * 打开闪光灯失败
     */
    onTorchInfo() {

    }

    /**
     * 断开链接
     */
    onDisconnected() {

    }

    /**
     * 网络出现问题
     */
    onIoError() {
        console.log('网络有问题');
    }

    /**
     * 中断直播流
     */
    onShutdown() {
        console.log('中断直播了');
    }

    /**
     * 推流中
     */
    onStreaming() {
        console.log('推流中');
    }

    /**
     * 准备完毕
     */
    onReady() {
        console.log('准备好了');
    }

    /**
     * 连接中
     */
    onConnecting() {
        console.log('链接对应服务器中');
    }

    render() {
        const {
            showQiniuStream,
            publishStatus,
            cameraDirection,
            publishUrl
        } = this.state;

        return (
            <View style={styles.container}>
                <StatusBar
                    animated={false}
                    backgroundColor={'#000000'}
                    barStyle={'light-content'}
                />
                {/**这里因为加载试图和react-navigation动画冲突会卡顿所以先等待动画结束在执行**/}
                {
                    showQiniuStream ? (
                        <QiniuStream
                            style={{ flex: 1 }}
                            publishStatus={false}
                            publishUrl={publishUrl}
                            direction={cameraDirection}
                            onConnecting={this.onConnecting}
                            onReady={this.onReady}
                            onStreaming={this.onStreaming}
                            onShutdown={this.onShutdown}
                            onIoError={this.onIoError}
                            onDisconnected={this.onDisconnected}
                            onTorchInfo={this.onTorchInfo}
                            onOpenCameraFail={this.onOpenCameraFail}
                        />
                    ) : null
                }
                {/**浮动头部布局**/}
                <View style={styles.floatHeader}>
                    <TouchableWithoutFeedback
                        onPress={this._onPressClose}
                    >
                        <Text style={styles.btnText}>关闭</Text>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback
                        onPress={this._onPressChangeCamera}
                    >
                        <Text style={styles.btnText}>切换摄像头</Text>
                    </TouchableWithoutFeedback>
                </View>
                {/**底部开始直播按钮**/}
                <TouchableWithoutFeedback
                    onPress={this._onPressStartStream}
                >
                    {
                        !publishStatus ? (
                            <View style={[styles.startBtnContainer, styles.isStopBg]}/>
                        ) : (
                            <View style={[styles.startBtnContainer, styles.isStartBg]}>
                                <View style={styles.solidBtn}/>
                            </View>
                        )
                    }
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#000000'
    },
    floatHeader: {
        position: 'absolute',
        top: 0,
        height: 50,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        paddingHorizontal: 15,
        flex: 1,
        left: 0,
        right: 0,
        zIndex: 2
    },
    btnText: {
        color: '#fff',
        fontSize: 16
    },
    startBtnContainer: {
        borderRadius: 40,
        zIndex: 2,
        borderWidth: 6,
        borderColor: '#fff',
        width: 72,
        height: 72,
        left: (width - 65) / 2,
        position: 'absolute',
        bottom: 55,
        padding: 16
    },
    solidBtn: {
        flex: 1,
        backgroundColor: '#f00'
    },
    isStopBg: {
        backgroundColor: '#f00'
    },
    isStartBg: {
        backgroundColor: '#000'
    }
});
